<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-01-21 15:24:21
 * @Function: Please Input Function
-->
<script>
import { Pagination } from 'element-ui';

export default {
  name: 'LkPagination',
  props: Object.assign({}, Pagination.props, {
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    pagerCount: {
      type: Number,
      default: 5
    }
  }),
  render () {
    const props = {};
    Object.keys(Pagination.props).forEach(k => {
      typeof this[k] !== 'undefined' && (props[k] = this[k]);
      return props[k];
    });

    return (
      <div class="lk-pagination-wrap">
        <el-pagination
          on-size-change = {(pageSize) => { this.$emit('size-change', pageSize); this.$emit('change', { pageSize, type: 'pageSize' }); }}
          on-current-change = {(currentPage) => { this.$emit('current-change', currentPage); this.$emit('change', { currentPage, type: 'currentPage' }); }}
          on-prev-click = {(currentPage) => { this.$emit('prev-click', currentPage); this.$emit('change', { currentPage, type: 'currentPage' }); }}
          on-next-click = {(currentPage) => { this.$emit('next-click', currentPage); this.$emit('change', { currentPage, type: 'currentPage' }); }}
          {...{ props, on: this.$listeners, scopedSlots: { ...this.$scopedSlots } }}
        ></el-pagination>
      </div>
    );
  }
};
</script>

<style lang='scss' scoped>
  .lk-pagination-wrap{
    text-align: right;
    padding: 15px 0 10px;
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .el-pager li{
      &:not(.active){
        background-color: #ffffff;
        border: 1px solid rgba(224,229,240,1);
      }
      border: 1px solid transparent;
      height: 30px;
      line-height: 28px;
    }
  }
</style>
